<template>
	<view class="login">
		<view class="header">
			<image @click="back" :src="leftArrow" mode=""></image>
		</view>
		<view class="login-box">
			<text class="wel-text" :animation="animationData">欢迎来到摄图</text>
			<view class="name-password">
				<view class="input">
					<view class="input-name">
						<image :src="phoneIcon" mode=""></image>
						<input type="number" placeholder="请输入手机号码" :placeholder-class="text" v-model="user.mobile" />
					</view>
					<view class="input-password">
						<image :src="passwordIcon" mode=""></image>
						<input type="number" placeholder="请输入验证码" :placeholder-class="text" v-model="user.password" />
					</view>
				</view>
				<view class="login-text">未注册的手机号验证后自动创建摄图账号</view>
				<button type="default" class="login-btn" @click="login">登录</button>
				<view class="login-methods">
					<view class="type">
						<image :src="wechatIcon" mode=""></image>
						<text>微信</text>
					</view>
					<text class="line"></text>
					<view class="type">
						<image :src="qqIcon" mode=""></image>
						<text>QQ</text>
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import { login } from '@/common/api/index.js'
	import {
		left_arrow,
		phone_icon,
		qq_icon_w,
		wechat_icon,
		password_icon
	} from '../../static/svg/index.js'
	export default {
		data() {
			return {
				leftArrow: left_arrow,
				phoneIcon: phone_icon,
				qqIcon: qq_icon_w,
				wechatIcon: wechat_icon,
				passwordIcon: password_icon,
				animationData: {},
				user: {
					mobile: null,
					password: null
				}
			}
		},
		onShow: function() {
			var animation = uni.createAnimation({
				duration: 1000,
				timingFunction: 'ease',
			})

			this.animation = animation

			animation.scale(0.5).step()
			animation.scale(1).step()

			this.animationData = animation.export()

		},
		methods: {
			back() {
				uni.navigateTo({
					url: '../app-start/app-start',
					animationDuration: 300,
					animationType: 'pop-out'
				})
			},
			async login () {
				let res = await login(this.user.mobile,this.user.password)
				console.log(res,'qingqiuco')
				if (res.code === 0) {
					uni.setStorageSync('token',res.data.token)
					this.$store.commit('login',res.data.token)
					uni.navigateTo({
						url: '../index/index',
						animationDuration: 300,
						animationType: 'pop-in'
					})
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.text {
		color: rgba(16, 16, 16, 100);
		font-size: 30upx;
	}

	.login {
		width: 100%;
		height: 100vh;

		.header {
			width: 100%;
			height: 176upx;
			box-sizing: border-box;
			padding-left: 40upx;
			padding-bottom: 20upx;
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: flex-end;

			image {
				width: 48upx;
				height: 48upx;
			}
		}

		.login-box {
			margin-top: 116upx;
			width: 100%;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.wel-text {
				font-size: 52upx;
				color: rgba(16, 16, 16, 100);
			}

			.name-password {
				width: 100%;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				.input {
					margin-top: 65upx;

					.input-password {
						margin-top: 42upx;
					}

					view {
						width: 600upx;
						height: 110upx;
						padding: 0 32upx;
						box-sizing: border-box;
						display: flex;
						flex-direction: row;
						align-items: center;
						border-radius: 55upx;
						background-color: rgba(245, 245, 245, 100);

						image {
							width: 44upx;
							height: 44upx;
							margin-right: 20upx;
						}

						input {
							flex: 1;
							padding-left: 20upx;
							border-left: 2upx solid #ddd;
						}

						.text {
							color: rgba(16, 16, 16, 100);
							font-size: 30upx;
						}
					}
				}

				.login-text {
					margin: 60upx 0;
					color: rgba(200, 200, 200, 100);
					font-size: 26upx;
				}

				.login-btn {
					width: 600upx;
					height: 110upx;
					line-height: 110upx;
					text-align: center;
					border-radius: 100upx;
					background-color: rgba(16, 16, 16, 100);
					color: rgba(255, 255, 255, 100);
					font-size: 32upx;
					text-align: center;
					font-family: -apple-system;
					border: 1px solid rgba(255, 255, 255, 100);
				}
			}
		}

		.login-methods {
			margin-top: 84upx;
			display: flex;
			flex-direction: row;
			align-items: center;

			.line {
				width: 2upx;
				height: 28upx;
				margin: 0 32upx;
			}

			.type {
				display: flex;
				flex-direction: column;

				image {
					width: 48upx;
					height: 48upx;
				}

				text {
					color: rgba(16, 16, 16, 100);
					font-size: 26upx;
				}
			}
		}
	}
</style>
